<template>
  <el-dialog title="身份认证查看" :close-on-click-modal="false" :visible.sync="messageShow" class="view">
    <el-form ref="dataForm" :model="form" :rules="dataRule" label-width="150px">
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>
      <el-form-item label="纳税身份证号" prop='idCard'>
        <el-input v-model="form.idCard"></el-input>
      </el-form-item>
      <el-form-item label="实名认证手机号" prop='authenticatedPhone'>
        <el-input v-model="form.authenticatedPhone"></el-input>
      </el-form-item>
      <el-form-item label="支付宝账号" prop='alipayAccount'>
        <el-input v-model="form.alipayAccount"></el-input>
      </el-form-item>
      <el-form-item label="银行卡号" prop='bankCardNumber'>
        <el-input v-model="form.bankCardNumber"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop='bankName'>
        <el-input v-model="form.bankName"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="messageShow = false">取消</el-button>
      <el-button type="primary" @click="updataData">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        messageShow: false,
        form: {},
        id: '',
        dataRule: {
          realName: [
            { required: true, message: "真实姓名不能为空", trigger: "blur" }
          ],
          idCard: [
            { required: true, message: "纳税身份证号不能为空", trigger: "blur" },
            {pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,message: '请输入正确的身份证号', trigger: 'blur'}
          ],
          authenticatedPhone: [
            { required: true, message: "实名认证手机号不能为空", trigger: "blur" },
            {pattern: /^1[3456789]\d{9}$/,message: '请输入正确的手机号', trigger: 'blur'}
          ],
          alipayAccount: [
            { required: true, message: "支付宝账号不能为空", trigger: "blur" }
          ],
          bankCardNumber: [
            { required: true, message: "银行卡号不能为空", trigger: "blur" }
          ],
          bankName: [
            { required: true, message: "开户行不能为空", trigger: "blur" }
          ]
        },
      };
    },
    methods: {
      init (id) {
        this.id = id
        this.form = {}
        this.messageShow = true
        this.$http({
          url: this.$http.adornUrl(`/account/saleAccount/authenticateInfo/${id}`),
          method: "get",
        }).then(({ data }) => {
          this.form = data.authenticateInfo
        })
      },
      updataData () {
        let data = { ...this.form, userId: this.id }
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/account/saleAccount/authenticateInfo/update`),
              method: "post",
              data
            }).then(({data}) => {
              if (data.code === 0) {
                this.messageShow = false
                this.$message({
                  message: "修改成功",
                  type: "success"
                })
              }
            })
          }
        })
      }
    }
  };
</script>
<style scoped>
  .el-row{
    font-size: 16px;
    margin: 15px 0;
  }
  .cencontent{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .colcontent{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #f2f2f2;
    width: 31.8%;
    margin-bottom: 25px;
    padding: 15px 15px 5px 15px;
  }
  .title{
    font-size: 17px;
    font-weight: 600;
  }
  .titlefu{
    font-size: 14px;
    margin-top: 18px;
  }
  .cencontent .el-row{
    font-size: 12px;
    margin: 10px 0;
  }
</style>
